<template>
  <el-container class="index-container">
    <el-header>
      <div>
        <img :src="config_info.image_url" alt="">
        <span>{{config_info.name}}</span>
      </div>
      <el-menu mode="horizontal" background-color="#333744" text-color="#fff" active-text-color="#fff">
        <el-menu-item index="0-0" @click="out_cache">清除缓存</el-menu-item>
        <el-submenu index="1-0">
          <template slot="title">账号：{{username}}</template>
          <el-menu-item index="1-1" @click="edit_admin_dialog_visible = true">修改密码</el-menu-item>
          <el-menu-item index="1-2" @click="logout">退出</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-header>
    <el-container>
      <el-aside :width="is_collapse?'64px':'200px'">
        <div class="toggle_button" @click="toggle_collapse">|||</div>
        <el-menu :default-active="href" :router="true" :collapse-transition="false" :collapse="is_collapse" :unique-opened="true" background-color="#333744" text-color="#fff" active-text-color="#409EFF">
              <el-submenu v-for="item in menu_list" :key="item.id" :index="item.id+''">
                <template slot="title">
                  <i :class="'iconfont ' + item.icon"></i>
                  <span>{{item.name}}</span>
                </template>
                <el-submenu v-for="second_item in item.children" :key="second_item.id" :index="second_item.id+''">
                  <template slot="title">
                    <i :class="'iconfont ' + second_item.icon"></i>
                    <span>{{second_item.name}}</span>
                  </template>
                  <el-menu-item v-for="three_item in second_item.children" :key="three_item.id" :index="'/'+three_item.href" @click="save_nav_state('/'+three_item.href,[item.name,second_item.name,three_item.name],three_item.children)">{{three_item.name}}</el-menu-item>
                </el-submenu>
              </el-submenu>
            </el-menu>
      </el-aside>
      <!-- 添加对话框 -->
      <el-dialog title="添加" :visible.sync="edit_admin_dialog_visible" :width="percentage_width" @close="edit_admin_dialog_close">
        <!-- 主体区 -->
        <el-form label-width="100px" :model="edit_admin_form" :rules="edit_admin_rules"  ref="edit_admin_ref">
          <el-form-item label="原密码" prop="y_password">
            <el-input type="password" placeholder="请输入原密码" maxlength="14" clearable show-word-limit v-model="edit_admin_form.y_password"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" placeholder="请输入密码" maxlength="14" clearable show-word-limit v-model="edit_admin_form.password"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="password_confirmation">
            <el-input type="password" placeholder="请输入确认密码" maxlength="14" clearable show-word-limit v-model="edit_admin_form.password_confirmation"></el-input>
          </el-form-item>
        </el-form>
        <!-- 按钮区 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="edit_admin_dialog_visible = false">取 消</el-button>
          <el-button type="primary" @click="upadte_pwd_view()">确 定</el-button>
          </span>
      </el-dialog>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data () {
    var checkYpassword = (rule, value, callback) => {
      // 定义正则表达式
      const regYpassword = /^[a-zA-Z0-9]{4,14}$/
      if (regYpassword.test(value)) {
        return callback()
      }
      callback(new Error('原密码必须4到14位的数字或字母!'))
    }
    var checkPassword = (rule, value, callback) => {
      // 定义正则表达式
      const regPassword = /^[a-zA-Z0-9]{4,14}$/
      if (regPassword.test(value)) {
        return callback()
      }
      callback(new Error('密码必须4到14位的数字或字母!'))
    }
    var checkPasswordConfirmation = (rule, value, callback) => {
      if (value !== this.edit_admin_form.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        return callback()
      }
    }
    return {
      config_info: {},
      percentage_width: this.$config.percentage_width, // 弹框的宽度
      // 账号
      username: '',
      // 是否折叠
      is_collapse: false,
      // 当前激活的地址
      href: window.sessionStorage.getItem('href'),
      // 左侧菜单数据
      menu_list: [],
      // 修改密码
      edit_admin_dialog_visible: false,
      edit_admin_form: { // 修改密码数据
        y_password: '',
        password: '',
        password_confirmation: ''
      },
      edit_admin_rules: {
        y_password: [
          { required: true, message: '请输入原密码！', trigger: 'blur' },
          { validator: checkYpassword, trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码！', trigger: 'blur' },
          { validator: checkPassword, trigger: 'blur' }
        ],
        password_confirmation: [
          { required: true, message: '请输入确认密码！', trigger: 'blur' },
          { validator: checkPasswordConfirmation, trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.get_menu_list()
  },
  methods: {
    // 退出
    logout () {
      this.$base.request({
        that: this,
        method: 'DELETE',
        url: 'auth/index/logout'
      }, (res) => {
        window.sessionStorage.clear()
        this.$router.push('/login')
      })
    },
    // 监听修改密码对话框的关闭事件
    edit_admin_dialog_close () {
      this.$refs.edit_admin_ref.resetFields()
    },
    // 修改密码提交
    upadte_pwd_view () {
      this.$refs.edit_admin_ref.validate(valid => {
        if (valid) {
          this.$base.request({
            that: this,
            method: 'PUT',
            url: 'auth/index/upadte_pwd_view',
            data: this.edit_admin_form
          }, (res) => {
            if (res.code === 8888) {
              this.$base.message({ that: this, message: res.msg })
              this.edit_admin_dialog_visible = false
            }
          })
        }
      })
    },
    // 获取左侧栏
    get_menu_list () {
      const menuList = window.sessionStorage.getItem('menu_list')
      const username = window.sessionStorage.getItem('username')
      if (menuList && username) {
        this.menu_list = JSON.parse(menuList)
        this.username = username
      } else {
        this.$base.request({
          that: this,
          url: 'auth/index/menu'
        }, (res) => {
          if (res.code === 8888) {
            this.menu_list = res.data.menu_list
            this.username = res.data.username
            window.sessionStorage.setItem('username', res.data.username)
            window.sessionStorage.setItem('menu_list', JSON.stringify(res.data.menu_list))
          }
        })
      }
      const configInfo = window.sessionStorage.getItem('config_info')
      if (configInfo) {
        this.config_info = JSON.parse(configInfo)
      } else {
        this.$base.request({
          that: this,
          url: 'auth/auth_config/config_info'
        }, (res) => {
          if (res.code === 8888) {
            this.config_info = res.data
            window.sessionStorage.setItem('config_info', JSON.stringify(res.data))
          }
        })
      }
    },
    // 控制左侧菜单的折叠与展开
    toggle_collapse () {
      this.is_collapse = !this.is_collapse
    },
    // 点击左侧栏储存数据
    save_nav_state (href, breadcrumb, childrenHref) {
      window.sessionStorage.setItem('childrenHref', JSON.stringify(childrenHref))
      window.sessionStorage.setItem('breadcrumb', JSON.stringify(breadcrumb))
      window.sessionStorage.setItem('href', href)
      this.href = href
    },
    // 清除缓存
    out_cache () {
      this.$base.confirm({ that: this, content: '确认要清除缓存？' }, () => {
        this.$base.request({
          that: this,
          method: 'DELETE',
          url: 'auth/index/out_cache'
        }, (res) => {
          if (res.code === 8888) {
            window.sessionStorage.removeItem('menu_list')
            window.sessionStorage.removeItem('href')
            window.sessionStorage.removeItem('breadcrumb')
            window.sessionStorage.removeItem('username')
            window.sessionStorage.removeItem('childrenHref')
            window.sessionStorage.removeItem('config_info')
            this.$base.message({ that: this, message: res.msg })
            this.$router.push('/')
          }
        })
      })
    }
  }
}
</script>
<style lang="less" scoped>
@import 'index.less';
</style>
